<template>
	<el-dialog v-model="dialog" title="操作退款">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<span>退款商品</span>
				</div>
			</template>
			<el-row v-if="orderItem">
				<el-col :span="6">
					<el-image style="width: 80px; height: 80px" :src="orderItem.picUrl" fit="cover" :preview-teleported="true"></el-image>
				</el-col>
				<el-col :span="18">
					<div class="overflow-line-clamp-2 name">{{ orderItem.spuName }}</div>
					<p></p>
					<div style="display: flex; justify-content: space-between">
						<span style="color: red">￥{{ orderItem.totalPrice }}</span>
						x{{ orderItem.buyQuantity }}
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="box-card">
			<el-form ref="formRef" :model="form" :rules="rules" label-width="130px">
				<el-form-item label="退款金额：">
					<span style="color: red">￥{{ refundInfo.refundAmount }}</span>
				</el-form-item>
				<el-form-item label="退款原因：">{{ refundInfo.refundReason }}</el-form-item>
				<!-- 只有退款中和退货退款中状态 可以进行退款操作 -->
				<el-form-item label="退款操作：" prop="status" v-if="refundInfo.status == '1' || refundInfo.status == '2'">
					<el-radio-group v-model="form.status">
						<!-- 子订单退款中显示 -->
						<el-radio label="11" v-if="orderItem.status == '1'">同意退款</el-radio>
						<el-radio label="21" v-if="orderItem.status == '1'">拒绝退款</el-radio>
						<!-- 子订单退货退款中显示 -->
						<el-radio label="12" v-if="orderItem.status == '2'">同意退货退款</el-radio>
						<el-radio label="22" v-if="orderItem.status == '2'">拒绝退货退款</el-radio>
					</el-radio-group>
				</el-form-item>
				<div v-else>
					<el-form-item label="退款状态：">{{ refundInfo.statusDesc }}</el-form-item>
					<el-form-item label="是否到账：">
						<el-tag :type="refundInfo.arrivalStatus == '1' ? 'success' : 'danger'" effect="light" round>{{
							refundInfo.arrivalStatus == '1' ? '已到账' : '未到账'
						}}</el-tag>
					</el-form-item>
					<el-form-item label="退回方式：" v-if="refundInfo.userReceivedAccount">
						<span>{{ refundInfo.userReceivedAccount }}</span>
					</el-form-item>
					<el-form-item label="退款流水号：" v-if="refundInfo.refundId">
						<span>{{ refundInfo.refundId }}</span>
					</el-form-item>
				</div>

				<el-form-item label="拒绝退款原因：" prop="refuseReason" v-if="form.status == '21' || form.status == '22'">
					<el-input v-model="form.refuseReason" :rows="2" type="textarea" placeholder="请输入拒绝退款原因" />
				</el-form-item>
			</el-form>
		</el-card>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialog = false">关闭</el-button>
				<el-button type="primary" @click="doSubmit" :loading="loading" v-if="refundInfo.status == '1' || refundInfo.status == '2'">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { getById, refundObj } from '/@/api/mall/orderrefund';
import { ElMessage } from 'element-plus';
export default defineComponent({
	props: {},
	emit: ['initPage'],
	setup(props, { emit }) {
		const data = reactive({
			rules: {
				refuseReason: [
					{
						required: true,
						message: '请输入拒绝退款原因',
						trigger: 'blur',
					},
				],
				status: [
					{
						required: true,
						message: '请选择退款操作',
						trigger: 'blur',
					},
				],
			},
			refundInfo: {
				id: undefined,
				status: '',
				refuseReason: '',
				arrivalStatus: '',
				userReceivedAccount: '',
				refundId: '',
				refundAmount: 0,
				statusDesc: '',
				refundReason: '',
			},
			orderItem: {
				picUrl: '',
				spuName: '',
				totalPrice: 0,
				buyQuantity: 0,
				status: '',
			},
			dialog: false,
			loading: false,
			form: {
				id: undefined,
				status: '',
				refuseReason: '',
			},
		});
		const formRef = ref();
		const initPage = (id: string) => {
			data.form = { id: undefined, status: '', refuseReason: '' };
			getDetail(id);
			data.dialog = true;
		};
		const getDetail = (id: string) => {
			getById(id).then((response) => {
				data.refundInfo = response.data.data;
				data.form.refuseReason = data.refundInfo.refuseReason;
				data.orderItem = response.data.data.orderItem;
			});
		};
		const doSubmit = () => {
			data.loading = true;
			data.form.id = data.refundInfo.id;
			refundObj(data.form)
				.then((res) => {
					ElMessage.success('操作成功');
					data.loading = false;
					data.dialog = false;
					emit('initPage');
				})
				.catch(() => {
					data.loading = false;
				});
		};
		return {
			formRef,
			initPage,
			doSubmit,
			...toRefs(data),
		};
	},
});
</script>
